<template>
    <div class="complete-page">
        <steps step="2"></steps>
        <div class="xm-form-1">
            <div class="input-group flex border-bottom">
                <label>站点选择</label>
                <input type="text" v-model="siteName" class="flex-1" @click="isPopBottom=true" id="siteName" placeholder="请选择所属站点"
                       readonly autocomplete="off">
                <i class="icon icon-arrowdown"></i>
                <p class="error" v-show="tips.siteName">{{tips.siteName}}</p>
            </div>
            <div class="input-group flex border-bottom">
                <label>企业名称 </label>
                <input type="text" v-model="form.name" class="flex-1" placeholder="请输入企业名称" autocomplete="off">
                <p class="error" v-show="tips.name">{{tips.name}}</p>
            </div>
            <div class="input-group flex border-bottom">
                <label>所在地</label>
                <div class="flex-1 address-select">
                    <span @click="isShow=true" v-if="!provinceName">请选择所在地</span>
                    <span class="color3" @click="isShow=true">{{provinceName}}{{cityName}}</span>
                </div>
                <i class="icon icon-arrowdown"></i>
            </div>
            <div class="input-group flex border-bottom">
                <label>详细地址</label>
                <input type="text" v-model="form.address" class="flex-1" placeholder="请输入企业地址" autocomplete="off">
                <p class="error" v-show="tips.address">{{tips.address}}</p>
            </div>
            <div class="input-group flex border-bottom">
                <label>联系人</label>
                <input type="text" v-model="form.contacts" class="flex-1" placeholder="请输入联系人姓名" autocomplete="off">
                <p class="error" v-show="tips.contacts">{{tips.contacts}}</p>
            </div>
            <div class="input-group flex border-bottom">
                <label>联系电话</label>
                <input type="text" v-model="form.phone" class="flex-1" placeholder="请输入联系电话" autocomplete="off">
                <p class="error" v-show="tips.phone">{{tips.phone}}</p>
            </div>
            <div class="notice" v-show="tips.notice">
                <p class="error">{{tips.notice}}</p>
            </div>
            <a href="javascript:;" id="next" class="btn btn1 next marginCenter" @click="next">下一步</a>
        </div>
        <div class="pop-bottom-group" v-show="isPopBottom">
            <div class="pop-bottom-list">
                <div class="item border-bottom" v-for="item in siteList" @click="selectSite(item)">{{item.siteName}}
                </div>
            </div>
            <div class="item opt" @click="isPopBottom=false"> 取消 </div>
        </div>
        <div class="fade" v-show="isPopBottom" @click="isPopBottom=false"></div>

        <changeAddress v-show="isShow" :provinceId="form.provinceId" :cityId="form.cityId"
                       :provinceName="provinceName"></changeAddress>

    </div>
</template>
<script>
    import steps from '../../components/steps/steps';
    import changeAddress from '../address/changeAddress.vue';

    let reg = {
        companyName: /^\S{1,50}$/,
        companyAddress: /^\S{1,100}$/,
        name: /^\S{1,50}$/,
        phone: /^(0|86|17951)?(1)[0-9]{10}$/,
        idCard: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    }
    let tips = {
        siteName: null,
        address: null, //企业地址
        contacts: null, //联系人姓名
        name: null, //企业名称
        phone: null, //联系人电话
        notice: null
    }
    export default {
        data() {
            return {
                isPopBottom: false,
                siteName: '', //所属站点
                siteList: [],
                cityName: '',
                provinceName: '',
                isShow: false,
                form: {
                    address: '', //企业地址
                    contacts: '', //联系人姓名
                    name: '', //企业名称
                    phone: '', //联系人电话
                    siteId: null, //所属站点id
                    cityId: '',
                    provinceId: ''
                },
                tips: tips
            };
        },
        methods: {
            selectSite(item) {
                this.form.siteId = item.siteId;
                this.siteName = item.siteName;
                this.isPopBottom = false;
            },
            next() {
                if (this.completeVerify()) {
                    complete(this.form).then(data => {
                        if (data.returnCode == '000000') {
                            this.$router.push({name: 'check'});
                        }
                    })
                }
            },
            completeVerify() {
                this.tips = tips;
                if (!this.form.siteId) {
                    this.tips.siteName = '请选择站点';
                    return;
                }
                if (!reg.companyName.test(this.form.name)) {
                    this.tips.name = '企业名称字符长度为1~50';
                    return;
                }
                if (!reg.companyAddress.test(this.form.address)) {
                    this.tips.address = '企业地址字符长度为1~100';
                    return;
                }
                if (!reg.name.test(this.form.contacts)) {
                    this.tips.contacts = '联系人名字字符长度为1~10';
                    return;
                }
                if (!reg.phone.test(this.form.phone)) {
                    this.tips.phone = '手机号码有误';
                    return;
                }
                return true;
            },
            getSiteList() {
                getSiteList().then(data => {
                    if (data.returnCode == '000000') {
                        this.siteList = data.result.siteList;
                    }
                }).catch(error => {
                    console.log(error);
                })
            }
        },
        filters: {
            siteName(name,tip){
                if(!name){
                    name = tip;
                }
                return name;
            }
        },
        created() {
            this.getSiteList();

        },
        mounted() {
        },
        components: {
            steps,
            changeAddress
        }
    };
</script>
<style lang="less" scoped>
    @import "../login/login.less";
    @import "./complete.less";
    .complete-page .xm-form-1{
        padding-bottom: .8rem;
    }
    .address-select{
        color: #ccc;
    }
    #next{
    }
</style>
